<%--
  Created by IntelliJ IDEA.
  User: lichengming
  Date: 2017/7/31
  Time: 上午10:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/resources.jsp" %>
<html>
<head>
    <title>分成统计</title>
    <style type="text/css">
        .ems_stat_card {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
        }

        .stat_card_item {
            width: 30%;
        }
        .merchant_stat_card_item {
            width: 24%;
        }

        .form-group {
            margin-left: 10px;
        }

        .form-group:first-child {
            margin-left: 0;
        }
        .distribution_stat_charts {
            margin-left: 15px;
            margin-right: 15px;
        }

        .distribution_platform_charts {
            display: flex;
            justify-content: space-between;
        }
        .distribution_platform_charts>div{
            width: 48%;
            height: 350px;
        }
        .ems_table_content {
            padding: 10px;
        }
    </style>
    <script src="/ems/js/echarts/echarts.min.js"></script>
</head>
<body>
    <%--<div class="panel panel-default">--%>
        <%--<div class="panel-heading">--%>
            <%--<h3 class="panel-title">条件筛选</h3>--%>
        <%--</div>--%>
        <%--<div class="panel-body">--%>
            <%--<form class="form-inline">--%>
                <%--<div class="form-group">--%>
                    <%--<label>角色：</label>--%>
                    <%--<select class="form-control">--%>
                        <%--<option>中铭智平台</option>--%>
                        <%--<option>商家</option>--%>
                        <%--<option>品牌合作伙伴</option>--%>
                        <%--<option>品牌服务中心</option>--%>
                        <%--<option>区县代理</option>--%>
                    <%--</select>--%>
                <%--</div>--%>

                <%--<div class="form-group">--%>
                    <%--<label>时间：</label>--%>
                    <%--<select class="form-control">--%>
                        <%--<option>今天</option>--%>
                        <%--<option>最近7天</option>--%>
                        <%--<option>最近30天</option>--%>
                        <%--<option>最近半年</option>--%>
                        <%--<option>最近一年</option>--%>
                    <%--</select>--%>
                <%--</div>--%>

                <%--<button type="button" class="btn btn-info btn-search">查询</button>--%>
                <%--<button type="button" class="btn btn-default btn-reset">清空</button>--%>
            <%--</form>--%>
        <%--</div>--%>
    <%--</div>--%>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">平台统计信息</h3>
        </div>
        <div class="panel-body" style="padding-bottom: 0;">
            <div class="ems_stat_card">
                <div class="panel panel-info stat_card_item">
                    <div class="panel-heading">
                        <h3 class="panel-title">订单总额</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <span>当日：</span>
                            <span>${currentDayPlatformRecord.day_amount}</span>
                        </p>
                        <p>
                            <span>总计：</span>
                            <span>${totalPlatformRecord.total_amount}</span>
                        </p>
                    </div>
                </div>

                <div class="panel panel-default stat_card_item">
                    <div class="panel-heading">
                        <h3 class="panel-title">平台收入总额</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <span>今日：</span>
                            <span>${currentDayPlatformRecord.day_income}</span>
                        </p>
                        <p>
                            <span>总计：</span>
                            <span>${totalPlatformRecord.total_income}</span>
                        </p>
                    </div>
                </div>

                <div class="panel panel-success stat_card_item">
                    <div class="panel-heading">
                        <h3 class="panel-title">平台让利总额</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <span>今日：</span>
                            <span>${currentDayPlatformRecord.day_outcome}</span>
                        </p>
                        <p>
                            <span>总计：</span>
                            <span>${totalPlatformRecord.total_outcome}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="panel panel-default distribution_stat_charts">
            <div class="panel-body">
                <div class="panel panel-default ">
                    <div class="panel-body distribution_platform_charts">
                        <div id="current_day_distribution_platform_charts"></div>
                        <div id="total_distribution_platform_charts"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
<script>
        var distributionPlatformCharts = echarts.init(document.getElementById('total_distribution_platform_charts'));
        var option = {
            title : {
                text: '历史分润统计',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['品牌服务中心','品牌合作伙伴','消费商','消费者']
            },
            series : [
                {
                    name: '历史让利统计',
                    type: 'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        {value:'${total_service_center_income}', name:'品牌服务中心'},
                        {value:'${total_cooperation_partner_income}', name:'品牌合作伙伴'},
                        {value:'${total_recommander_income}', name:'消费商'},
                        {value:'${total_consumer_income}', name:'消费者'}
                    ],
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        distributionPlatformCharts.setOption(option);
    </script>
<script>
    var distributionPlatformCharts = echarts.init(document.getElementById('current_day_distribution_platform_charts'));
    var option = {
        title : {
            text: '当日分润统计',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['品牌服务中心','品牌合作伙伴','消费商','消费者']
        },
        series : [
            {
                name: '分润统计',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:'${current_day_service_center_income}', name:'品牌服务中心'},
                    {value:'${current_day_cooperation_partner_income}', name:'品牌合作伙伴'},
                    {value:'${current_day_recommander_income}', name:'消费商'},
                    {value:'${current_day_consumer_income}', name:'消费者'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    distributionPlatformCharts.setOption(option);
</script>

    <div class="panel panel-default">
        <div class="panel-heading">
            <h3 class="panel-title">商家统计信息</h3>
        </div>
        <div class="panel-body" style="padding-bottom: 0;">
            <div class="ems_stat_card">
                <div class="panel panel-info merchant_stat_card_item">
                    <div class="panel-heading">
                        <h3 class="panel-title">商家订单总额</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <span>当日：</span>
                            <span>${currentDayMerchantRecord.day_merchant_amount}</span>
                        </p>
                        <p>
                            <span>总计：</span>
                            <span>${totalMerchantRecord.total_merchant_amount}</span>
                        </p>
                    </div>
                </div>

                <div class="panel panel-default merchant_stat_card_item">
                    <div class="panel-heading">
                        <h3 class="panel-title">商家收入总额</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <span>今日：</span>
                            <span>${currentDayMerchantRecord.day_merchant_income}</span>
                        </p>
                        <p>
                            <span>总计：</span>
                            <span>${totalMerchantRecord.total_merchant_income}</span>
                        </p>
                    </div>
                </div>

                <div class="panel panel-default merchant_stat_card_item">
                    <div class="panel-heading">
                        <h3 class="panel-title">商家分润总额</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <span>今日：</span>
                            <span>${currentDayMerchantRecord.day_merchant_outcome}</span>
                        </p>
                        <p>
                            <span>总计：</span>
                            <span>${totalMerchantRecord.total_merchant_outcome}</span>
                        </p>
                    </div>
                </div>

                <div class="panel panel-success merchant_stat_card_item">
                    <div class="panel-heading">
                        <h3 class="panel-title">商家积分总额</h3>
                    </div>
                    <div class="panel-body">
                        <p>
                            <span>今日：</span>
                            <span>${currentDayMerchantRecord.day_merchant_score}</span>
                        </p>
                        <p>
                            <span>总计：</span>
                            <span>${totalMerchantRecord.total_merchant_score}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>

        <div class="ems_table_content">
            <div class="panel panel-default">
                <div class="panel-heading">商家分成列表</div>
                <div id="table_tools">
                    <form class="form-inline" role="form">
                        <div class="form-group">
                            <%--<label for="searchName">商家名称：</label>--%>
                            <input type="text" class="form-control" id="searchName" name="shop_name" placeholder="商家名称">
                        </div>
                        <div class="form-group">
                            <%--<label>时间：</label>--%>
                            <input type="text" class="form-control" id="begin_time" name="begin_time" placeholder="开始时间">
                            <label>-</label>
                            <input type="text" class="form-control" id="end_time"  name="end_time" placeholder="结束时间">
                        </div>
                        <div class="form-group" style="bottom: 3px;position: relative;">
                            <button type="button" class="btn btn-info btn-search">查询</button>
                            <button type="button" class="btn btn-default btn-reset">清空</button>
                        </div>
                    </form>
                </div>
                <table id="merchatDayCountTable"
                       data-url="/ems/distributionstat/pagination"
                       data-show-export="true">
                    <thead>
                    <tr>
                        <th data-field="state" data-checkbox="true"></th>
                        <th data-field="show_name">店铺</th>
                        <th data-field="show_owner_name">店主</th>
                        <th data-field="total_amount">订单总额</th>
                        <th data-field="total_count">订单总数</th>
                        <th data-field="total_income">总收入</th>
                        <th data-field="total_score">总积分</th>
                        <th data-field="total_outcome">总让利</th>
                        <th data-field="time">日期</th>
                    </tr>
                    </thead>
                </table>
            </div>
        </div>
    </div>

<script>
    $("#merchatDayCountTable").createTable({
        search:false
    });
    $('#begin_time,#end_time').datetimepicker({
        language : 'zh-CN',
        format : 'yyyy-MM-dd',
    });
</script>
</body>
</html>
